<template>
  <div>
   <el-form>
     <!-- 出发地-->
     <el-form-item label="选择出发地">
       <el-select v-model="province" placeholder="请选择省份" style="width: 170px"
                  value-key="name"
                  @change="getAddr_city">
         <el-option
           v-for="item in address_province"
           :key="item.code"
           :label="item.name"
           :value="item">
         </el-option>
       </el-select>

       <el-select
         v-model="city"
         collapse-tags
         style="margin-left: 20px;width: 150px"
         placeholder="请选择城市">
         <el-option
           v-for="item in address_city"
           :key="item.value"
           :value="item.name">
         </el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="选择目的地">
       <el-select v-model="go_province" placeholder="请选择省份" value-key="name"
                  @change="getAddr_city"
                  style="width: 150px">
         <el-option
           v-for="item in go_address_province"
           :key="item.code"
           :label="item.name"
           :value="item">
         </el-option>
       </el-select>
       <el-select
         v-model="go_city"
         collapse-tags
         style="margin-left: 20px;width: 150px"
         placeholder="请选择城市">
         <el-option
           v-for="item in go_address_city"
           :key="item.value"
           :value="item.name">
         </el-option>
       </el-select>
     </el-form-item>
   </el-form>
  </div>
</template>

<script>
import getAddrList from "@/api/getAddrList"

export default {
  name: "getAddr",
  data() {
    return {
      //出发省列表
      address_province: [],
      //出发市列表
      address_city: [],
      //到达省列表
      go_address_province: [],
      //达到市列表
      go_address_city: [],
      //出发选择的省
      province: '',
      //出发选择的市
      city: '',
      //出发选择的省
      go_province: '',
      //达到选择的市
      go_city: '',
      lastForm: '',
      lastTo: ''
    }
  },
  created() {
    //加载省份
    this.getProvince()
  },
  methods: {
    /**
     *  用来转换数据
     */
    forTransformation() {
      //转换省+市格式
      if (this.province.name == null && this.go_province.name == null) {
        this.lastForm = undefined
        this.lastTo = undefined
        console.log("子组件的数据："+this.lastForm+this.lastTo)
      } else {
        this.lastForm = this.province.name + this.city
        this.lastTo = this.go_province.name + this.go_city
        console.log("子组件的数据："+this.lastForm+this.lastTo)

      }
    },
    //获得省份
    getProvince() {
      getAddrList.getProvince()
        .then(response => {

          //获得全部的省份
          this.address_province = response.data.province
          this.go_address_province = response.data.province
        })
    },
    //获得城市
    getAddr_city(e) {
      getAddrList.getProvince(e.code)
        .then(result => {
          //获取该省份下的市；如果没找到不是bug而是数据库没有 -----[~___~]----
          this.address_city = result.data.city
          this.go_address_city = result.data.city
        })
    },
  }
}
</script>

<style scoped>

</style>
